<template>
  <div>
    <card>
      <div class="flexCSB">
        <div class="flexzbc">
          <div>
            <DatePicker :clearable="clearable" format="yyyy-MM-dd" type="daterange" placeholder="请选择起止时间"
              style="width: 300px" :value="time" @on-change="onChange"></DatePicker>
          </div>
          <div class="flexzbcop" :style="{ display: 'flex' }">
            <el-input clearable style="width: 100%; margin-left: 10px" placeholder="请输入号码" @input="input"
              v-model="condition" class="input-with-select">
              <el-select clearable style="width: 90px" v-model="queryType" slot="prepend" placeholder="请选择">
                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-input>
          </div>
          <!-- <div style="margin-left: 30px;">      
             <TimePicker 
             format="HH:mm" 
             confirm 
             type="timerange" 
             :model-value="this.sTime" 
             placement="bottom-end" 
             @on-change="changTime" 
             @on-ok="okchange"
             placeholder="请选择到馆时间" 
             style="width: 168px" />
          </div> -->
          <el-select style="margin-left: 30px;" v-model="valuew" @change="valuechange" clearable placeholder="请选择到馆时间">
            <el-option
             
              v-for="item in options"
              :key="item"
              :value="item"
              >
            </el-option>
        </el-select>
        </div>
      </div>
      <div class="flexCSB" style="margin-top: 10px">
        <div>
          <RadioGroup v-model="states" type="button" @on-change="change2">
            <Radio label="0">全部</Radio>
            <Radio label="1">待使用</Radio>
            <Radio label="2">已使用</Radio>
            <Radio label="3">已取消</Radio>
            <Radio label="4">已过期</Radio>
          </RadioGroup>
          <RadioGroup v-model="isTeamBook" type="button" @on-change="change3">
            <Radio :label="false">个人预约</Radio>
            <Radio :label="true">团队预约</Radio>
          </RadioGroup>

          <!-- <RadioGroup v-model="isTeamBooks" type="button" @on-change="change4" v-if="isdisplay">
            <Radio :label="true">导出个人预约信息(Excel)</Radio>
          </RadioGroup>

          <RadioGroup v-model="isTeamBooks1" type="button" @on-change="change5" v-else>
            <Radio :label="true">导出团队预约信息(Excel)</Radio>
          </RadioGroup> -->
          <Button :size="buttonSize" icon="ios-download-outline" type="primary" v-if="isdisplay"
            @click="change4">导出个人预约信息(Excel)</Button>
          <Button :size="buttonSize" icon="ios-download-outline" type="info" v-else
            @click="change5">导出团队预约信息(Excel)</Button>
        </div>
      </div>
      <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
      <Page show-total class="page" :total="total" :current.sync="current" :page-size='size' show-elevator
        @on-change="changePage" />
      <Modal title="详细信息" v-model="modal" width="70">
        <Spin fix size="large" v-if="loading3"></Spin>
        <Table class="table" highlight-row :columns="column1" :data="data2"></Table>
        <div slot="footer">
          <Button type="warning" class="Button" @click="modal = false">关闭</Button>
        </div>

      </Modal>
      <!-- reservation-people/export -->
    </card>
  </div>
</template>

<script>
import { exportMethod } from "../../../util/push";
import axios from "axios";
export default {
  data() {
    return {
      options:[],
      valuew:'',
      sessionTime:[],
      isTeamBooks: false,
      isTeamBooks1: false,
      loading1: false,
      loading3: false,
      isdisplay: true,
      condition: "",
      headers: {},
      columns: [],
      columns1: [
        {
          title: "openid",
          key: "openid",
          align: "center",
          minWidth: 110,
          fixed: "left",
        },

        {
          title: "预约到馆日期",
          key: "travelDate",
          align: "center",
          minWidth: 110,
        },
        {
          title: "预约到馆时间段",
          key: "sessionTime",
          align: "center",
          minWidth: 150,
        },
        // {
        //   title: "签到时间",
        //   key: "checkTime",
        //   align: "center",
        //   minWidth: 140,
        // },
        {
          title: "提交预约时间 ",
          key: "gmtCreate",
          align: "center",
          minWidth: 180,
        },
        { title: "参观人数", key: "num2", align: "center", minWidth: 100 },

        {
          title: "预约状态",
          align: "center",
          minWidth: 160,
          key: "states2",
          render: (h, params) => {
            let color = "";
            if (params.row.states2 == "待使用") {
              color = "warning";
            }
            if (params.row.states2 == "已使用") {
              color = "primary";
            }
            if (params.row.states2 == "已取消") {
              color = "error";
            }
            if (params.row.states2 == "已过期") {
              color = "";
            }
            return h(
              "Tag",
              {
                props: { type: "dot", color: color },
              },
              params.row.states2
            );
          },
        },

      ],
      columns2: [
        {
          title: "团队名称",
          key: "teamName",
          align: "center",
          minWidth: 110,
          fixed: "left",
        },

        {
          title: "预约到馆时间段",
          key: "sessionTime",
          align: "center",
          minWidth: 150,
        },
        {
          title: "进馆时间",
          key: "travelDate",
          align: "center",
          minWidth: 140,
        },
        {
          title: "提交预约时间 ",
          key: "gmtCreate",
          align: "center",
          minWidth: 180,
        },

        { title: "参观人数", key: "num2", align: "center", minWidth: 100 },


        { title: "负责人", key: "teamLeader", align: "center", minWidth: 100 },
        {
          title: "负责人联系电话",
          key: "teamPhone",
          align: "center",
          minWidth: 150,
        },
        // {
        //   title: "电子邮箱",
        //   key: "teamEmail",
        //   align: "center",
        //   minWidth: 150,
        // },
        {
          title: "预约状态",
          align: "center",
          minWidth: 160,
          key: "states2",
          render: (h, params) => {
            let color = "";
            if (params.row.states2 == "待使用") {
              color = "warning";
            }
            if (params.row.states2 == "已使用") {
              color = "primary";
            }
            if (params.row.states2 == "已取消") {
              color = "error";
            }
            if (params.row.states2 == "已过期") {
              color = "";
            }
            return h(
              "Tag",
              {
                props: { type: "dot", color: color },
              },
              params.row.states2
            );
          },
        },
        // {
        //   title: "是否需要导览服务",
        //   align: "center",
        //   minWidth: 160,
        //   key: "needTour2",
        //   render: (h, params) => {
        //     let color = "";
        //     if (params.row.needTour2 == "是") {
        //       color = "primary";
        //     }
        //     if (params.row.needTour2 == "否") {
        //       color = "error";
        //     }
        //     return h(
        //       "Tag",
        //       {
        //         props: { type: "dot", color: color },
        //       },
        //       params.row.needTour2
        //     );
        //   },
        // },
        // {
        //   title: "签到时间 ",
        //   key: "checkTime",
        //   align: "center",
        //   minWidth: 180,
        // },

      ],
      data: [],
      column2: [
        { title: "名称", key: "name", align: "center" },
        { title: "证件号", key: "cardNum", align: "center" },
        { title: "证件类型", key: "certType", align: "center" },
        {
          title: "参观者类型", key: "adults", align: "center",
          render: (h, params) => {
          
            let color = "";
         
            if (params.row.adults == "成年") {
              color = "primary";
            }
            if (params.row.adults == "未成年") {
              color = "primary";
            }
            return h(
              "Tag",
              {
                props: { type: "dot", color: color  },
              },
              params.row.adults
            );
          },

        },
        {
          title: "手机号", key: "phone", align: "center",

        },
        { title: "测量数据", key: "temperature", align: "center" },
        { title: "核销状态", key: "status", align: "center",
        render: (h, params) => {
            let color=""
            if (params.row.status == 4 ) {
              color = "primary";
            } 
            if(params.row.status ==1 ){
               color = "warning";
            }  
            if (params.row.status ==2 ){
               color = "warning";
            }else if (params.row.status ==3 ){
               color = "warning";
            }
            return h(
              "Tag",
              {
                props: { type: "dot", color: color  },
              },
              params.row.status
            );
          },

         },
      ],

      column1: [],

      type: [
        {
          label: "身份证",
          value: "card",
        },
        {
          label: "手机号",
          value: "phone",
        },
      ],
      current: 1,
      size: 10,
      total: 0,
      states: "0",
      isTeamBook: false,
      modal: false,
      data2: [],
      datahx:[],
      clearable: false,
      time: [],
      sTime:[],
      screenWidth: document.body.clientWidth,
      width: 350,

      time2: [],

      queryType: "",

      UploadData: {},
    };
  },
  created() {
    let time = this.getTime(new Date());
    let time1 = this.getTime(new Date(new Date().getTime() - 86400000 * 5));
    this.time = [time1, time];
    this.headers = {
      token: localStorage.getItem("token"),
    };

    this.columns1.push({
      title: "操作",
      align: "center",
      fixed: "right",
      minWidth: 130,
      render: (h, params) => {
        return h("div", [
          h(
            "Button",
            {
              props: {
                type: "success",
              },
              on: {
                click: () => {
                  this.detail(params);
                },
              },
            },
            "查看"
          ),
        ]);
      },
    });

    this.columns = this.columns1;

    var date = new Date();
    this.time2 = this.getTime(date).split("-");
    this.time2.push(this.getTime(this.getTime4(7)));
    this.time2.push(this.getTime(this.getTime4(1)));
    this.getReservationPeopleList();

  },

  mounted() {
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
    console.log(this.museumId);
    this.placeSel()
  },
  watch: {
    screenWidth(val) {
      let that = this;
      setTimeout(function () {
        var myChart = that.echarts.init(document.getElementById("echarts"));
        myChart.resize();
      }, 300);
    },
    "$store.state.isCollapse"(val) {
      if (val) {
        this.width = 170;
      } else {
        this.width = 350;
      }
      let that = this;
      setTimeout(function () {
        var myChart = that.echarts.init(document.getElementById("echarts"));
        myChart.resize();
      }, 300);
    },
  },
  methods: {
    
    changTime(data){
      this.sTime=data;
      this.getReservationPeopleList();
    },
    // okchange(){
    //   console.log(this.sTime);
    //   let firsthour = this.sTime[0].split(':')[0] 
    //   let secondhour = this.sTime[1].split(':')[0]
    //   let firstmin = this.sTime[0].split(':')[1]
    //   let secondmin = this.sTime[1].split(':')[1]
    //   console.log(firsthour,firstmin,secondhour,secondmin);
    //   console.log(this.data);
    //  this.data = this.data.filter((item,index)=>{
    //     let timearea = item.sessionTime.split('-')
    //      let fthour = timearea[0].split(':')[0] 
    //      let shour = timearea[1].split(':')[0]
    //      let ftmin = timearea[0].split(':')[1]
    //      let smin = timearea[1].split(':')[1]
         
    //       return fthour >= firsthour && ftmin >= firstmin && shour <= secondhour && smin <= secondmin
    //   })
    
    
    // },
    onChange(data) {
      this.time = data;
      this.current = 1;
      this.getReservationPeopleList();
      this.placeSel()

    },
    input(data) {
      this.condition = data;
      this.getReservationPeopleList();

    },

    changePage(data) {
      this.current = data;
      this.getReservationPeopleList();

    },
    placeSel(){
      this.$http(
        "/chongqing/stage/reservation-people/findSessionTimes",
        {
          endDate:this.time[1],
          startDate:this.time[0]
        },
        'post',
        (res)=>{
          console.log("所有场次信息",res);
         
         
          this.options=res.data.data
        }
      )
    },
    valuechange(){
      console.log(this.valuew);
      this.getReservationPeopleList()

    },
    //导出个人excel
    change4() {
      console.log("个人预约提交6666666666");
      let start = "",
        end = "";
      if (this.time[0] != "" && this.time[1] != "") {
        start = this.time[0];
        end = this.time[1];
      }
      exportMethod({
        url: "/chongqing/stage/reservation-people/exportReservationPeople",
        method: "post",
        data: {
          orders: [
            {
              asc: true,
              column: "1"
            }
          ],
          bookType: 1,
          beginDate: start == undefined ? "" : start,
          cardNum: this.queryType == "card" ? this.condition : "",
          current: this.current,
          endDate: end == undefined ? "" : end,
          phone: this.queryType == "phone" ? this.condition : "",
          size: this.size,
          status: Number(this.states),
        },
      });
    },
    //导出团队Excel
    change5() {
      console.log("团队预约提交555555");
      let start = "",
        end = "";
      if (this.time[0] != "" && this.time[1] != "") {
        start = this.time[0];
        end = this.time[1];
      }
      exportMethod({
        url: "/chongqing/stage/reservation-people/exportReservationPeople",
        method: "post",
        data: {
          bookType: 2,
          orders: [
            {
              asc: true,
              column: "1"
            }
          ],
          beginDate: start == undefined ? "" : start,
          cardNum: this.queryType == "card" ? this.condition : "",
          current: this.current,
          endDate: end == undefined ? "" : end,
          phone: this.queryType == "phone" ? this.condition : "",
          size: this.size,
          status: Number(this.states),
        },
      });
    },
    getReservationPeopleList() {
      let start = "",
        end = "";
      if (this.time[0] != "" && this.time[1] != "") {
        start = this.time[0];
        end = this.time[1];
      }
      
      console.log("this.sessionTime", this.sessionTime);

      this.loading1 = true;
      if (this.isTeamBook) {
        this.$http(
          "/chongqing/stage/reservation-people/getTeamReservationPeopleList",
          {
            beginDate: start == undefined ? "" : start,
            cardNum: this.queryType == "card" ? this.condition : "",
            current: this.current,
            endDate: end == undefined ? "" : end,
            phone: this.queryType == "phone" ? this.condition : "",
            size: this.size,
            status: this.states,
            sessionTime:this.valuew
          },
          "post",
          (res) => {
            console.log(res,"777777777777777777777777777");
            if (res.data.code == 1000) {
              this.data = res.data.data.records;              
              this.total = res.data.data.total;
              for (let i = 0; i < this.data.length; i++) {
                if(this.data[i].certType="身份证"){
                  if (this.data[i].adults==true) {
                  this.data[i].adults = "成年";
                 
                } else {
                  this.data[i].adults = "未成年";
                }
                }
                
                if (this.data[i].status == 1) {
                  this.data[i].states2 = "待使用";
                }
                if (this.data[i].status == 2) {
                  this.data[i].states2 = "已使用";
                }
                if (this.data[i].status == 3) {
                  this.data[i].states2= "已取消";
                }
                if (this.data[i].status == 4) {
                  this.data[i].states2 = "已过期";
                }
                if (this.data[i].needTour) {
                  this.data[i].needTour2 = "是";
                } else {
                  this.data[i].needTour2 = "否";
                }
                this.data[i].num2 = this.data[i].num + " 人";
              }
            } else {
              this.$Message.error(res.data.msg);
            }
          }
        );
      } else {
        this.$http(
          "/chongqing/stage/reservation-people/getPersonalReservationPeopleList",
          {
            beginDate: start == undefined ? "" : start,
            cardNum: this.queryType == "card" ? this.condition : "",
            current: this.current,
            endDate: end == undefined ? "" : end,
            phone: this.queryType == "phone" ? this.condition : "",
            size: this.size,
            status: this.states,
            sessionTime:this.valuew
          },
          "post",
          (res) => {    
            console.log("wwxsxv66666666666xsxx",res);
            if (res.data.code == 1000) {
              this.data = res.data.data.records;
              this.total = res.data.data.total;
              for (let i = 0; i < this.data.length; i++) {               
                if (this.data[i].status == 1) {
                  this.data[i].states2 = "待使用";
                  this.data[i].gmtModified2 = " - ";
                }
                if (this.data[i].status == 2) {
                  this.data[i].states2 = "已使用";
                  this.data[i].gmtModified2 = this.data[i].gmtModified;
                }
                if (this.data[i].status == 3) {
                  this.data[i].states2 = "已取消";
                  this.data[i].gmtModified2 = " - ";
                }
                if (this.data[i].status == 4) {
                  this.data[i].states2 = "已过期";
                  this.data[i].gmtModified2 = " - ";
                }
                this.data[i].num2 = this.data[i].num + " 人";
              }
            } else {
              this.$Message.error(res.data.msg);
            }
          }
        );
      }

      this.loading1 = false;

    },
    detail(params) {
      this.loading3 = true;
      this.$http(
        "/chongqing/stage/reservation-people/getPersonalReservationPeopleDetail",
        {
          id: params.row.id,
        },
        "get",
        (res) => {
          console.log("res",res);
          if (res.data.code == 1000) {
            if (this.museumId == "4075") {
              this.column1 = this.column3;
            } else {
              this.column1 = this.column2;
            }
            this.modal = true;
            this.data2 = res.data.data;
            for(let i = 0; i < this.data2.length; i++){
              console.log(this.data2[i].adults);
              if(this.data2[i].certType!=="身份证"){
                this.data2[i].adults = "无";
                }else{
                  if (this.data2[i].adults==true) {
                  this.data2[i].adults = "成年";
                } else {
                  this.data2[i].adults = "未成年";
                }
                }
             
            }
            this.datahx = res.data.data;
            console.log(this.datahx,"11111111111111111111111111111111111111111111111");
             for(let i = 0; i < this.datahx.length; i++){
              console.log(this.datahx[i].status);
              if (this.datahx[i].status==1) {
                  this.datahx[i].status = "待使用"
                } if(this.datahx[i].status==2) {
                  this.datahx[i].status = "已使用"
                }if(this.datahx[i].status==3) {
                  this.datahx[i].status = "已取消"
                }if(this.datahx[i].status==4) {
                  this.datahx[i].status = "已过期"
                }
            }
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading3 = false;
          // console.log("详情",res.data);
        }
      );
    },
    change2() {
      this.current = 1;
      this.getReservationPeopleList();

    },
    change3() {
      if (this.isTeamBook) {
        this.columns = this.columns2;
        // console.log(this.columns,"/*/*/*/////////");
        this.isdisplay = false
      } else {
        this.isdisplay = true
        this.columns = this.columns1;
        //  console.log(this.columns,"我是团队");
      }
      this.current = 1;
      this.getReservationPeopleList();
    },

  },
};
</script>

<style scoped>
.echarts {
  height: 300px;
}

.titleModal {
  width: 800px;
  position: relative;
  left: 50%;
  margin-left: -400px;
}

.title {
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  font-size: 20px;
}

.titleModal1 {
  display: flex;
  justify-content: space-between;
}

.titleModal2 {
  font-weight: bold;
  margin-top: 10px;
}

.titleModal3 {
  text-align: right;
  margin-top: 10px;
}

.buttonDiv {
  display: flex;
  justify-content: flex-end;
}

.flexzbc {
  display: flex;
}

.flexzbcop {
  margin-left: 30px;
}
</style>
